<script>

export default {
  name: "MalButton",
  props: {
    // 按钮类型
    type: {
      type: String,
      default: 'default'
    },
    // 是否圆形按钮
    round: {
      type: Boolean,
      default: false
    },
    // 朴素按钮(浅色)
    plain: {
      type: Boolean,
      default: false
    },
    // 按钮大小
    lg: {
      type: Boolean,
      default: false
    },
    md: {
      type: Boolean,
      default: false
    },
    sm: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isPlain() {
      if (this.$props.plain) {
        switch (this.$props.type) {
          case 'danger':
            return 'bg-red-200 hover:bg-red-500 ' +
                'border-solid border border-[red] ' +
                'text-[red] hover:text-white'
          case 'warning':
            return 'bg-amber-200 hover:bg-amber-500 ' +
                'border-solid border border-[orange] ' +
                'text-[orange] hover:text-white'
          case 'success':
            return 'bg-green-200 hover:bg-green-500 ' +
                'border-solid border border-[green] ' +
                'text-[green] hover:text-white'
          case 'info':
            return 'bg-gray-200 hover:bg-gray-500 ' +
                'border-solid border border-[gray] ' +
                'text-[gray] hover:text-white'
          case 'primary':
            return 'bg-sky-200 hover:bg-sky-400 ' +
                'border-solid border border-[skyblue] ' +
                'text-[blue] hover:text-white'
          default:
            return 'border-solid border border-[gray] hover:bg-sky-100'
        }
      }
    },
    isRound() {
      if (this.$props.round) {
        return 'rounded-3xl'
      } else {
        return 'rounded-md'
      }
    },
    // 根据不同类型显示背景
    btnType() {
      // console.log(this.$props)
      switch (this.$props.type) {
        case 'danger':
          return 'bg-red-500 hover:bg-red-400 border-solid border border-[gray] text-white'
        case 'warning':
          return 'bg-amber-500 hover:bg-amber-400 text-white'
        case 'success':
          return 'bg-green-500 hover:bg-green-400 text-white'
        case 'info':
          return 'bg-gray-500 hover:bg-gray-400 text-white'
        case 'primary':
          return 'bg-sky-400 hover:bg-sky-300 text-white'
        default:
          return 'border-solid border border-[gray] hover:bg-sky-100'
      }
    },
    bg() {
      if (this.$props.plain) {
        return this.isPlain
      }
      return this.btnType
    },
    size() {
      if (this.$props.lg) {
        return "text-lg px-7 py-3 font-bold"
      }
      if (this.$props.md) {
        return "text-md px-5 py-2 font-medium"
      }
      if (this.$props.sm) {
        return "text-sm px-3 py-1 font-light"
      }
      return "text-md px-5 py-2 font-medium"
    }
  }
}
</script>

<template>
  <!-- 传递<>xxx</>,xxx显示在<slot></slot> -->
  <button
      :class="bg,isRound,size"
      class="">
    <slot></slot> <!-- 插槽出口 -->
  </button>
</template>

<style scoped>
</style>